<template>
  <div id="Home">
    <nav-bar class="home-nav">
      <div slot="left">
        <el-input v-model="input" placeholder="请输入内容"></el-input>
      </div>
      <div slot="center" @click="login">登录</div>
      <div slot="right" @click="register">注册</div>
    </nav-bar>
    <swiper>
      <swiper-item v-for="(item, index) in bannerList" :key="item.title">
        <a href="#" v-if="index == 0" class="imgs">
          <img src="../../assets/img/lbt2.png" />
        </a>
        <a href="#" v-else-if="index == 1" class="imgs">
          <img src="../../assets/img/lbt1.png" />
        </a>
        <a href="#" v-else-if="index == 2" class="imgs">
          <img src="../../assets/img/lbt3.png" />
        </a>
      </swiper-item>
    </swiper>
    <home-recommend-view></home-recommend-view
    ><!-- 抢购 -->
    <work-fash></work-fash
    ><!-- 本周流行 -->
    <fashion
      :titles="['流行', '精选', '新款']"
      class="tab-control"
      @click="tabClick()"
    ></fashion>
    <goods :goods="goods[currentType].list"></goods>
    <back-top></back-top>
    <div id="select" @click="clickDetial()">
      <div class="style">
        <img src="../../assets/img/common/sp5.png" />
        <p>拖鞋</p>
        <span>766人喜欢<img src="../../assets/img/common/sc.png" /></span>
      </div>
      <div class="style">
        <img src="../../assets/img/common/sp3.png" />
        <p>运动鞋</p>
        <span>3453人喜欢<img src="../../assets/img/common/sc.png" /></span>
      </div>
      <div class="style">
        <img src="../../assets/img/common/sp6.png" />
        <p>背包</p>
        <span>777人喜欢<img src="../../assets/img/common/sc.png" /></span>
      </div>
      <div class="style">
        <img src="../../assets/img/common/sp1.png" />
        <p>凳子</p>
        <span>￥9.9 123人喜欢<img src="../../assets/img/common/sc.png" /></span>
      </div>
      <div class="style">
        <img src="../../assets/img/common/sp3.png" />
        <p>拖鞋</p>
        <span>123r喜欢<img src="../../assets/img/common/sc.png" /></span>
      </div>
      <div class="style">
        <img src="../../assets/img/common/sp3.png" />
        <p>拖鞋</p>
        <span>1444人喜欢<img src="../../assets/img/common/sc.png" /></span>
      </div>
      <div class="style">
        <img src="../../assets/img/common/sp4.png" />
        <p>拖鞋</p>
        <span>5656人喜欢<img src="../../assets/img/common/sc.png" /></span>
      </div>
      <div class="style">
        <img src="../../assets/img/common/sp5.png" />
        <p>拖鞋</p>
        <span>323人喜欢<img src="../../assets/img/common/sc.png" /></span>
      </div>
      <div class="style">
        <img src="../../assets/img/common/sp6.png" />
        <p>拖鞋</p>
        <span>5645人喜欢<img src="../../assets/img/common/sc.png" /></span>
      </div>
      <div class="style">
        <img src="../../assets/img/common/sp7.png" />
        <p>拖鞋</p>
        <span>77人喜欢<img src="../../assets/img/common/sc.png" /></span>
      </div>
      <div class="style">
        <img src="../../assets/img/common/sp8.png" />
        <p>拖鞋</p>
        <span>999人喜欢<img src="../../assets/img/common/sc.png" /></span>
      </div>
      <div class="style">
        <img src="../../assets/img/common/sp10.png" />
        <p>拖鞋</p>
        <span>87人喜欢<img src="../../assets/img/common/sc.png" /></span>
      </div>
      <div class="style">
        <img src="../../assets/img/common/sp11.png" />
        <p>拖鞋</p>
        <span>123人喜欢<img src="../../assets/img/common/sc.png" /></span>
      </div>
      <div class="style">
        <img src="../../assets/img/common/sp12.png" />
        <p>拖鞋</p>
        <span>123人喜欢<img src="../../assets/img/common/sc.png" /></span>
      </div>
      <div class="style">
        <img src="../../assets/img/common/sp5.png" />
        <p>拖鞋</p>
        <span>123人喜欢<img src="../../assets/img/common/sc.png" /></span>
      </div>
      <div class="style">
        <img src="../../assets/img/common/sp6.png" />
        <p>拖鞋</p>
        <span>56人喜欢<img src="../../assets/img/common/sc.png" /></span>
      </div>
      <div class="style">
        <img src="../../assets/img/common/sp2.png" />
        <p>拖鞋</p>
        <span>1453人喜欢<img src="../../assets/img/common/sc.png" /></span>
      </div>
      <div class="style">
        <img src="../../assets/img/common/sp9.png" />
        <p>拖鞋</p>
        <span>123人喜欢<img src="../../assets/img/common/sc.png" /></span>
      </div>
      <div class="style">
        <img src="../../assets/img/common/sp10.png" />
        <p>运动鞋</p>
        <span>344人喜欢<img src="../../assets/img/common/sc.png" /></span>
      </div>
      <div class="style">
        <img src="../../assets/img/common/sp11.png" />
        <p>布鞋</p>
        <span>89人喜欢<img src="../../assets/img/common/sc.png" /></span>
      </div>
      <div class="style">
        <img src="../../assets/img/common/sp12.png" />
        <p>衣服</p>
        <span>123人喜欢<img src="../../assets/img/common/sc.png" /></span>
      </div>
      <div class="style">
        <img src="../../assets/img/common/sp5.png" />
        <p>裤子</p>
        <span>99人喜欢<img src="../../assets/img/common/sc.png" /></span>
      </div>
      <div class="style">
        <img src="../../assets/img/common/sp6.png" />
        <p>拖鞋</p>
        <span>123人喜欢<img src="../../assets/img/common/sc.png" /></span>
      </div>
      <div class="style">
        <img src="../../assets/img/common/yx1.png" />
        <p>照片1</p>
        <span>123人喜欢<img src="../../assets/img/common/sc.png" /></span>
        <ul>
          <li>加载更多.....</li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
	import NavBar from '../../components/common/navbar/NavBar.vue'
	import HomeRecommendView from './childComps/HomeRecommendView.vue'
	import WorkFash from '../../components/conent/WrokFash.vue'
	import Fashion from '../../components/conent/Fashion.vue'
	import Goods from '../../components/conent/good/Goods.vue'
	import BackTop from '../../components/conent/BackTop.vue'

	import {
		getHomeMulitidata,
		getHomeGoods
	} from '../../network/home.js'
	//如果没有index.js文件我们需要这样导入
	/* import Swiper from '../../components/common/swiper/Swiper.vue'
	import SwiperItem from '../../components/common/swiper/SwiperItem.vue' */
	//但是有这个文件我们只需要这样导入就行
	import {
		Swiper,
		SwiperItem
	} from '../../components/common/swiper'
	export default {
		name: "Home",
		components: {
			NavBar,
			Swiper,
			SwiperItem,
			HomeRecommendView,
			WorkFash,
			Fashion,
			Goods,
			BackTop
	
		},
		data() {
			return {
				navData: null, //保存所有的数据
				banners: [],
				recommends: [],
				goods: {
					'pop': {
						page: 0,
						list: []
					},
					'news': {
						page: 0,
						list: []
					},
					'sell': {
						page: 0,
						list: []
					}
				},
				currentType: 'pop',
				num: 0,
				timer: null,
				bannerList: [
					"../../assets/img/lbt1.png",
					"../../assets/img/lbt2.png",
					"../../assets/img/lbt3.png"
					
				],
				saveY:0
			}
		},
		created() {
			//请求多个数据
			this.getHomeMulitidata()
			//请求商品数据
			this.getHomeGoods('pop')
			this.getHomeGoods('news')
			this.getHomeGoods('sell')
		},
		methods: {
			//事件监听相关的方法
			tabClick(index) { //点击谁就请求谁的数据
				switch (index) {
					case 0:
						this.currentType = 'pop';
						break;
					case 1:
						this.currentType = 'new';
						break;
					case 2:
						this.currentType = 'sell';
						break;
				}
			},
			//网络请求相关的方法
			getHomeMulitidata() {
				getHomeMulitidata().then(res => {
					this.navData = res; //请求到的数据是轮播图的数据  在首页
					this.banners = res.data.banner;
					this.recommends = res.data.recommend;
				})
			},
			getHomeGoods(type) {
				/* 这里我们请求到的数据是流行界面的数据 */
				const page = this.goods[type].page + 1
				getHomeGoods('pop', page).then(res => {
					this.goods[type].list.push(...res.data.list)
					this.goods[type].page + 1
					/* 合并两个数组用es6新属性 扩展运算符... */
				})
			},
			clickDetial(){//点击跳转到详情页
				this.$router.push('/detail')
			},
			login(){//点击跳转到详情页
				this.$router.push('/login')
			},
			register(){//点击跳转到详情页
				this.$router.push('/register')
			},
			activated(){
				console.log('home enter')
			},
			deactivated(){
				//记录离开时的位置
				this.saveY = this.$refs.scroll._scroll.y
				console.log('home leave')
			}
		}
	}
</script>

<style scoped>
.imgs {
  width: 688px;
  height: 400px;
}
.home-nav {
  background-color: #f4a460;
  color: beige;
}

#nav {
  height: 200px;
  background-color: #000000;
}

.tab-control {
  position: sticky;
  /* 实现鼠标悬停效果 */
}
.style span img {
  padding-left: 10px;
  width: 30px;
  height: 30px;
}
.style {
  text-align: center;
  float: left;
  margin-left: 5px;
}
.style span {
  color: red;
  padding-top: 5px;
}
.style img {
  width: 260px;
  height: 260px;
}
ul {
  height: 100px;
}
</style>
